<style lang="scss" scoped>
.phome {
  @include n-col1;
  align-items: stretch;

  .phome-list {
    height: 0;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 30px;

    > li {
      border-radius: 20px;
      background: $theme-bg-white1;

    }

    .phome-list-ad {
      grid-column-end: span 3;
      @include n-row1;
      padding: 0 30px;
      gap: 30px;

      > article {
        padding-left: 20px;
        flex: 1;
        width: 0;

        > h3 {
          font-size: 22px;
          color: $theme-text2;
          line-height: 1.6;
        }

        > p {
          font-size: 16px;
          color: $theme-text5;
          line-height: 1.6;
          margin-top: 15px;
        }
      }

      > img {
        display: block;
        height: 100%;
      }
    }

    .phome-list-chart {
      padding: 30px;
      @include n-col2;
      align-items: flex-start;

      > p {
        font-size: 14px;
        color: $theme-text5;
        line-height: 1;
      }

      > h3 {
        font-size: 42px;
        margin-top: 30px;
        color: $theme-text2;
        line-height: 1;
      }

      > h4 {
        font-size: 14px;
        margin-top: 5px;
        color: var(--theme-green);
        line-height: 1;
      }

      > h5 {
        font-size: 13px;
        //margin-top: 20px;
        color: $theme-text6;
      }
    }

    .phome-list-card {
      padding: 30px;
      @include n-col2;
      align-items: flex-start;

      > img {
        height: 40px;
      }

      > h3 {
        margin-top: 30px;
        font-size: 18px;
        color: $theme-text2;
        line-height: 1;
      }

      > p {
        font-size: 13px;
        margin-top: 17px;
        color: $theme-text5;
        line-height: 1;
      }
    }
  }
}

.pme {
  padding-top: 20px;

  .n-page-h1 {
    gap: 20px;
    position: relative;

    .n-page-tabs {
      @include n-center;
    }
  }

  .pme-main {
    @include n-row1;

  }

  .pme-left {
    background: $theme-bg-white1;
    border-radius: 30px;
    width: 60%;
    max-width: 920px;

    ::v-deep .n-handle-content {
      padding: 0 10px 20px 10px;

      .n-handle-form > li {
        padding: 0 10px;
        margin-bottom: 10px;
      }

    }

    .pme-title {
      font-weight: bold;
      font-size: 16px;
      margin-top: 17px;
      color: $theme-text2;
    }

  }

  .pme-user {
    padding: 20px;
    border-bottom: 1px solid $theme-border3;

    > header {
      @include n-row1;
      align-items: flex-start;

      > img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 50%;
        border: 2px solid $theme-color;
      }

      > i {
        margin-left: auto;
        background: var(--theme-color-light9);
      }
    }

    > h3 {
      line-height: 1;
      font-size: 26px;
      //margin-top: 20px;
      font-weight: bold;
      color: $theme-text2;
    }

    > p {
      line-height: 1.6;
      font-size: 14px;
      margin-top: 10px;
      color: $theme-text5;
    }
  }

}
</style>
<template>
  <div class="n-page pme" v-loading="loading">
    <h1 class="n-page-h1">
      <em>{{ $route.meta.title }}</em>
    </h1>
    <el-row :gutter="20">
      <el-col :span="3">
        <el-row class="tac">
          <el-col>
            <!--    <h5>默认颜色</h5>-->
            <el-menu
                default-active="2"
                class="el-menu-vertical-demo">

              <el-menu-item index="2" @click="current='showPrice'">
                <i class="el-icon-menu"></i>
                <span slot="title">价格设置</span>
              </el-menu-item>

              <el-menu-item index="4" @click="current='giftUpload'">
                <i class="el-icon-upload"></i>
                <span slot="title">上传礼品</span>
              </el-menu-item>

              <el-menu-item index="5" @click="current='uploadNews'">
                <i class="el-icon-upload"></i>
                <span slot="title">上传文章</span>
              </el-menu-item>

              <el-menu-item index="7" @click="current='uploadService'">
                <i class="el-icon-upload"></i>
                <span slot="title">上传服务</span>
              </el-menu-item>

              <el-menu-item index="6" @click="current='dataView'">
                <i class="el-icon-odometer"></i>
                <span slot="title">数据看板</span>
              </el-menu-item>


            </el-menu>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="18">
        <div class="pme-main">
          <pme-left v-show="current == 'dataView'">
            <!--        <h3>上传礼品</h3>-->
            <div class="n-page phome" v-loading="loading">
              <!--            <em>数据看板</em>-->
              <!--		<h1 class="n-page-h1">-->

              <!--			<el-button icon="el-icon-plus" type="primary" >添加文件夹</el-button>-->
              <!--		</h1>-->
              <ul class="phome-list">

                <li class="phome-list-ad">
                  <article>
                    <h3>大数据获客工具</h3>
                    <p>智脑云拓，您的专业营销专家。</p>
                  </article>
                  <img src="@/assets/img/11.png"/>
                </li>
                <li class="phome-list-chart">
                  <p>本周新增用户</p>
                  <h3>20</h3>
                  <h4>用户+3</h4>
                  <h5>较上个月用户+8</h5>
                </li>

                <li class="phome-list-card">
                  <img style="filter:  hue-rotate(200deg);" src="@/assets/img/10.png"/>
                  <h3>88765</h3>
                  <p>可获取用户数</p>
                </li>
                <li class="phome-list-card">
                  <img src="@/assets/img/10.png"/>
                  <h3>1234231</h3>
                  <p>线索数量</p>
                </li>
                <li class="phome-list-card">
                  <img style="filter:  hue-rotate(160deg);" src="@/assets/img/10.png"/>
                  <h3>50</h3>
                  <p>用户数</p>
                </li>
                <li class="phome-list-card">
                  <img style="filter:  hue-rotate(50deg);" src="@/assets/img/10.png"/>
                  <h3>20</h3>
                  <p>代理商数</p>
                </li>

              </ul>


            </div>
          </pme-left>
          <pme-left v-show="current == 'uploadService'">
            <n-handle class="n-page-dialog" :conf="handleUploadServiceConfig.props" ref="handleUploadServiceConfigHandle"
                      :compList="handleUploadServiceConfig.compList" :btns="handleUploadServiceConfig.btns" @ok="handleAddService"
                      :form="handleUploadServiceConfig.form"/>
          </pme-left>
          <pme-left v-show="current == 'uploadNews'">
            <n-handle class="n-page-dialog" :conf="handleNews.props" ref="handleNewsHandle"
                      :compList="handleNews.compList" :btns="handleNews.btns" @ok="handleAddNews"
                      :form="handleNews.form"/>
          </pme-left>
          <pme-left v-show="current == 'giftUpload'">
            <n-handle class="n-page-dialog" :conf="handleConfigUploadGift.props" ref="handleConfigUploadGiftHandle"
                      :compList="handleConfigUploadGift.compList" :btns="handleConfigUploadGift.btns"
                      @ok="handleAddGift"
                      :form="handleConfigUploadGift.form"/>
          </pme-left>
          <div class="pme-left" v-show="current == 'showPrice'">
            <div class="pme-user">
              <header><img src="@/assets/img/9.png"/><i class="n-page-iconBtn el-icon-edit-outline"></i></header>
              <h3>{{ userInfo && userInfo.name || '游客' }}</h3>
            </div>

            <n-handle class="n-page-dialog" :conf="handleConf.props" ref="handle" :compList="handleConf.compList"
                      :btns="handleConf.btns" @ok="handle" :form="handleConf.form">
              <template #title="{conf}">
                <p class="pme-title">{{ conf.title }}</p>
              </template>
            </n-handle>

          </div>
        </div>
      </el-col>
      <!--  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
      <!--  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
    </el-row>
    <!--</template>-->
    <!--    <p class="n-page-back"><span><i class="el-icon-back"></i>返回</span></p>-->
  </div>
</template>
<script>
export default {
  data() {
    return {
      handleUploadServiceConfig:{
        props: {showHead: false, insertEl: false, type: 'page', size: '100%'},
        // props:{title: '添加礼品', size:'600px'},
        compList: [
          {type: 'text', label: '标题', required: true, k: 'title'},
          {
            type: 'upload', label: '缩略图', required: false, k: 'litpic_local', types: ['png', 'jpg', 'jpeg', 'webp'],
            onUpload: async ({tg, conf, vm, files}) => {
              if (conf.files.length) return this.$msg('最多上传一张图片', 2)
              const file = files[0];
              const item = {prog: 0, type: 'img', path: '', name: file.name};
              conf.files.push(item)

              const form = new FormData();
              form.set('file', file)
              const reqConf = this.$api.user.upload(form,)
              reqConf.bindEv('progressUpload', ({loaded, total}) => item.prog = ~~(loaded / total * 100))
              const res = await this._req(reqConf.content);
              if (!res) return (item.err = vm.$t('该文件上传失败'));
              item.path = this.$conf.env.baseUrl + res.file.filePath;
              item.path2 = res.file.filePath;
              this.handleUploadServiceConfig.form[conf.k] = conf.files.map(v => v.path2).join(',')
            },
          },
          {type: 'num', min: 0, precision: 2, label: '会员价', required: true, k: 'membership_price'},
          {type: 'num', min: 0, precision: 2, label: '代理商价格', required: true, k: 'agent_price'},
          {type: 'num', precision: 0, label: '排序', required: true, k: 'sort'},
          {type: 'switch', label: '是否显示', required: true, k: 'is_show'},
          {
            type: 'date',
            label: '录入时间',
            required: true,
            k: 'create_time',
            props: {type: 'datetime', 'default-time': '00:00:00'}
          },

          {
            type: 'rich-text', label: '详情', k: 'details', required: true,
            compList: ['b', 'u', 'i', 's', 'alignLeft', 'alignCenter', 'alignRight', 'subScript', 'superScript', 'font', 'fontSize', 'lineHeight', 'color', 'fontBg', 'format', 'clear', 'margin', 'padding', 'bg', 'border', 'hr', 'link', 'table']
          },


        ],
        form: {
          view_num: 10,
        },
        _form: {
          title: '',
          litpic_local: '',
          membership_price: '',
          agent_price: '',
          details: '',
          is_show: 1,
          sort: '',
          create_time: '',
          view_num: 10,
        },
        btns: [
          {label: '确定添加', props: {type: 'primary'}, evKey: 'ok'},
        ],
      },
      handleNews: {
        form:{
          is_featured:1,
          views:10,
          status:1,
        },
        compList: [

          {type: 'text', label: '标题', required: true, k: 'title'},
          {type: 'text', label: '摘要', required: true, k: 'excerpt'},
          // {type: 'text', label: '状态', required:true, k: 'status'},

          {
            type: 'upload',
            label: '封面图',
            required: true,
            k: 'news_banner',
            types: ['png', 'jpg', 'jpeg', 'webp'],
            multiple: 1,
            onUpload: async ({tg, conf, vm, files}) => {

              for (const file of files) {
                const item = {prog: 0, type: 'img', path: '', name: file.name};
                conf.files.push(item)

                const form = new FormData();
                form.set('file', file)
                const reqConf = this.$api.user.upload(form,)
                reqConf.bindEv('progressUpload', ({loaded, total}) => item.prog = ~~(loaded / total * 100))

                this._req(reqConf.content).then(res => {
                  if (!res) return (item.err = vm.$t('该文件上传失败'));
                  item.path = this.$conf.env.baseUrl + res.file.filePath;
                  item.path2 = res.file.filePath;
                  this.handleNews.form.featured_image = conf.files[0] && conf.files[0].path2 || '';
                  this.handleNews.form[conf.k] = conf.files.slice(1).map(v => v.path2)
                })


              }

            },
          },


          {
            type: 'rich-text', label: '内容', k: 'content', required: true,
            compList: ['b', 'u', 'i', 's', 'alignLeft', 'alignCenter', 'alignRight', 'subScript', 'superScript', 'font', 'fontSize', 'lineHeight', 'color', 'fontBg', 'format', 'clear', 'margin', 'padding', 'bg', 'border', 'hr', 'link', 'table']
          },


        ],
        btns:[
						{ label: '确定添加', props:{type: 'primary'}, evKey: 'ok' },
					],
         props: {showHead: false, insertEl: false, type: 'page', size: '100%'},
      },
      handleConfigUploadGift: {
        props: {showHead: false, insertEl: false, type: 'page', size: '100%'},
        // props:{title: '添加礼品', size:'600px'},

        compList: [

          {type: 'text', label: '标题', required: true, k: 'title'},
          {
            type: 'upload', label: '缩略图', required: false, k: 'litpic_local', types: ['png', 'jpg', 'jpeg', 'webp'],
            onUpload: async ({tg, conf, vm, files}) => {
              if (conf.files.length) return this.$msg('最多上传一张图片', 2)
              const file = files[0];
              const item = {prog: 0, type: 'img', path: '', name: file.name};
              conf.files.push(item)

              const form = new FormData();
              form.set('file', file)
              const reqConf = this.$api.user.upload(form,)
              reqConf.bindEv('progressUpload', ({loaded, total}) => item.prog = ~~(loaded / total * 100))
              const res = await this._req(reqConf.content);
              if (!res) return (item.err = vm.$t('该文件上传失败'));
              item.path = this.$conf.env.baseUrl + res.file.filePath;
              item.path2 = res.file.filePath;
              this.handleConfigUploadGift.form[conf.k] = conf.files.map(v => v.path2).join(',')
            },
          },


          {type: 'num', min: 0, precision: 2, label: '会员价', required: true, k: 'membership_price'},
          {type: 'num', min: 0, precision: 2, label: '代理商价格', required: true, k: 'agent_price'},
          {type: 'num', precision: 0, label: '排序', required: true, k: 'sort'},
          {type: 'switch', label: '是否显示', required: true, k: 'is_show'},
          {
            type: 'date',
            label: '录入时间',
            required: true,
            k: 'create_time',
            props: {type: 'datetime', 'default-time': '00:00:00'}
          },

          {
            type: 'rich-text', label: '详情', k: 'details', required: true,
            compList: ['b', 'u', 'i', 's', 'alignLeft', 'alignCenter', 'alignRight', 'subScript', 'superScript', 'font', 'fontSize', 'lineHeight', 'color', 'fontBg', 'format', 'clear', 'margin', 'padding', 'bg', 'border', 'hr', 'link', 'table']
          },


        ],
        form: {
          view_num: 10,
        },
        _form: {
          title: '',
          litpic_local: '',
          membership_price: '',
          agent_price: '',
          details: '',
          is_show: 1,
          sort: '',
          create_time: '',
          view_num: 10,
        },
        btns: [
          {label: '确定添加', props: {type: 'primary'}, evKey: 'ok'},
        ],
      },

      current: 'showPrice',
      // showPrice:false,
      loading: false,
      handleConf: {
        props: {showHead: false, insertEl: false, type: 'page', size: '100%'},
        form: {},
        _form: {
          job: '',
          company: '',
          address: '',
          birthday: '',
          email: '',
          phone: '',
          dingding: '',
          proxyPrice: '',
          vipPrice: '',
          seniorPrice:'',
          proxyDetail:'',
          vipDetail:'',
          seniorDetail:"",
        },
        compList: [
          // {type:'slot', slotName: 'title', title: '主要信息' },
          // {type: 'text', label: '职位', required:true, k: 'job'},
          // {type: 'text', label: '公司', required:true, k: 'company'},
          // {type: 'text', label: '地点', required:true, k: 'address'},
          // {type: 'text', label: '出生日期', required:true, k: 'birthday'},
          // { type:'slot', slotName: 'title', title: '联系方式' },
          // {type: 'text', label: '电子邮箱', required:true, k: 'email'},
          // {type: 'text', label: '手机', required:true, k: 'phone'},
          // {type: 'text', label: '钉钉', required:true, k: 'dingding'},
          // { type:'slot', slotName: 'title', title: '价格'},
            {type: 'num', min: 0, precision: 2, label: '付费会员价', required: true, k: 'proxyPrice'},
            {type: 'num', min: 0, precision: 2, label: '代理商价格', required: true, k: 'vipPrice'},
            {type: 'num', min: 0, precision: 2, label: '企业高级版', required: true, k: 'seniorPrice'},
            {
							type: 'rich-text', label: '付费会员说明', k: 'proxyDetail',  required: true,
							compList:[ 'b','u','i','s','alignLeft','alignCenter','alignRight','subScript','superScript','font','fontSize','lineHeight','color','fontBg','format','clear','margin','padding','bg','border','hr','link','table' ]
						},
            {
							type: 'rich-text', label: '代理商说明', k: 'vipDetail',  required: true,
							compList:[ 'b','u','i','s','alignLeft','alignCenter','alignRight','subScript','superScript','font','fontSize','lineHeight','color','fontBg','format','clear','margin','padding','bg','border','hr','link','table' ]
						},
            {
							type: 'rich-text', label: '企业高级版说明', k: 'seniorDetail',  required: true,
							compList:[ 'b','u','i','s','alignLeft','alignCenter','alignRight','subScript','superScript','font','fontSize','lineHeight','color','fontBg','format','clear','margin','padding','bg','border','hr','link','table' ]
						},

        ],
        btns: [
          {label: '确定', props: {type: 'primary'}, evKey: 'ok'},
        ],
      },


    }
  },
  computed: {
    userInfo() {
      return this.$store.userInfo
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    async handleAddService(opt){
      const {handleUploadServiceConfig: {props, form}} = this;
      if (!this.$refs.handleUploadServiceConfigHandle.verif()) return;
      const res = await this._req(this.$api.goods.createService(form), props);
      if (!res) return;
      this.$msg();
      this.getData();
      props.show = false;
    },
    async handleAddNews(opt) {
        const { handleNews:{props,form } } = this;
				if(!this.$refs.handleNewsHandle.verif()) return;
				const res = await this._req(this.$api.article.createArticle(form),props);
				if(!res)return;
				this.$msg();
				this.getData();
				props.show = false;
    },
    async handleAddGift(opt) {
      const {handleConfigUploadGift: {props, form}} = this;
      console.log(form)
      if (!this.$refs.handleConfigUploadGiftHandle.verif()) return;
      const res = await this._req(this.$api.goods.createGoods(form), props);
      if (!res) return;
      this.$msg();
      this.getData();
      props.show = false;
    },
    async getData(row) {
      const res = await this._req(this.$api.user.getUserConf());
      if (res) this.handleConf.form = this.$base.params.merge(res.data, this.handleConf._form)
    },
    async handle(opt) {
      const {handleConf: {props, form}} = this;
      if (!this.$refs.handle.verif()) return;
      const res = await this._req(this.$api.user.updateUserConf(form));
      if (!res) return;
      this.$msg();
      this.getData();
    },


  }
}
</script>
